<template>
    <van-nav-bar
    title="海报" left-text="返回" left-arrow fixed placeholder z-index="1000" @click-left="back" />

    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
    </van-pull-refresh>
    <h1 style="text-align: center;">分销海报</h1>
    
    <img :src="CouponList"/>
    <div class="button-wrap">
        <van-button class="boxx" type="primary" @click="OnClick">生成海报</van-button>
    </div>

    <div class="link">
        <input class="input" type="text" placeholder="普通输入框" readonly="" id="url" :value="links"/>   
        <van-button class="mui-btn" type="button" @click="Btn">点击复制</van-button>
    </div>


    <Tabbar />
</template>

<script setup>
    const {proxy} = getCurrentInstance() // 获取当前实例

    let business = proxy.$business // 获取业务逻辑

    let refreshing = ref(false) //下拉刷新

    const CouponList =  ref([])
    const links = ref([])
    onMounted(() => sale())
    const sale = async () => {
        let params = {
        busid: business.value.id
    }

    var result = await proxy.$POST({url:'/sale/index',params})

    if(result.code == 0) //如果请求失败
    {
      proxy.$fail(result.msg) //提示错误信息
    }
    CouponList.value = result.data.poster
    links.value = result.data.link

    }

    // 点击重新生成海报
    const OnClick = async() => {

        let params = { busid: business.value.id }
        
        // 调用生成海报接口（假设与获取接口相同）
        const result = await proxy.$POST({
            url: '/sale/index', 
            params
        })

        if(result.code === 0) {
            proxy.$fail(result.msg)
            return
        }
        
        // 更新海报和链接
        CouponList.value = result.data.poster
        links.value = result.data.link
        
        proxy.$success('海报生成成功') // 显示成功提示
    }

    const Btn = () => {
        var url = document.getElementById('url')

        url.select()

        //让浏览器来执行copy命令
        document.execCommand('Copy') && mui.toast('已复制到剪切板')
    }

    const back = () => proxy.$router.push('/business')
</script>
    
<style scoped>
    @import url('/assets/css/SaleMoney.css');
    .boxx{
        color: #fff;
        border: 20px solid #4cd964;
        background-color: #4cd964;
        margin-left: 9em;
    }
    .mui-btn{
        height: 2em;
    }
    .input{
        margin-left: 2.6em;
    }
</style>